﻿

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>角色管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="~/lib/layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="~/lib/layuiadmin/style/admin.css" media="all">
	<style>
		.selectUp .layui-form-select dl {
			top: auto;
			bottom: 15px;
		}
	</style>
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="search">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">关键字</label>
						<div class="layui-input-block">
							<input type="text" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<button type="submit" class="layui-btn" lay-submit lay-filter="search">条件查询</button>
						<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">重置条件</button>
					</div>
				</div>
			</div>
			<div class="layui-card-body">
				<div class="layui-btn-group table-operate-btn" style="padding-bottom: 10px;">
					<button class="layui-btn" data-type="add">添加</button>
				</div>

				<table id="table" lay-filter="table"></table>
				<script type="text/html" id="table-operate">

					{{#  if(d.id !='-1'){ }}
					<a class="layui-btn layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
					<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="permission"><i class="layui-icon layui-icon-set"></i>权限</a>
					<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
					{{#  } }}
				</script>
			</div>
		</div>
	</div>

	<!--添加或修改弹窗-->
	<div class="layui-form layui-card-header layuiadmin-card-header-auto" style="display: none" lay-filter="edit" id="window">
		<div class="layui-form-item">
			<label class="layui-form-label">角色名</label>
			<div class="layui-input-block">
				<input type="hidden" name="id"/><!--修改时需要-->
				<input type="text" name="name" lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<textarea type="text" name="bak" placeholder="请输入备注" autocomplete="off" class="layui-textarea"></textarea>
			</div>
		</div>
	</div>

	<script src="~/lib/layuiadmin/layui/layui.js"></script>
	<script>
		layui.use(['table', 'layer', 'form'], function () {
			var $ = layui.$
				, form = layui.form
				, table = layui.table
				, layer = layui.layer;
			var data_table = table.render({
				elem: '#table'
				, url: '/api/role/list'
				, response: {
					statusCode: 200 //规定成功的状态码，默认：0
					, countName: 'rows' //规定数据总数的字段名称，默认：count
				}
				, page: true
				, cols: [[
					{ field: 'id', title: '主键', hide: true }
					, { field: 'name', title: '角色名' }
					, { field: 'bak', title: '备注' }
					, { field: 'updateTime', title: '上次修改时间', width: 160 }
					, { fixed: 'right', width: 240, align: 'center', toolbar: '#table-operate' }
				]]
			});
			//清空界面值
			function clear() {
				form.val("edit", {
					"id": "",
					"name": "",
					"bak":""
				});
				form.render();
			}
			//表格重新加载
			function reload() {
				data_table.reload({
					page: {
						curr: 1
					}
					, where: null
				});
			}
			//表格行事件
			table.on('tool(table)', function (obj) {
				var data = obj.data;
				if (obj.event === 'delete') {
					console.log(obj.data.id);
					layer.confirm('确认删除角色?', { title: '删除确认' }, function (index) {
						$.post({
							url: '/api/role/del'
							, type: "post"
							, data: JSON.stringify(data)
							, contentType: "application/json"
							, success: function (res) {
								if (res.code == 200) {
									reload();//删除成功
								} else {
									layer.msg(res.msg);
								}
							}
						});
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					layer.open({
						type: 1
						, title: '编辑角色'
						, content: $("#window")
						, btn: ['确认', '取消']
						, success: function (layero, index) {
							//表单赋值
							form.val("edit", {
								"id": data.id,
								"name": data.name,
								"bak": data.bak
							});							
							// 添加form标识
							layero.addClass('layui-form');
							// 将第一个按钮改变成提交按钮
							layero.find('.layui-layer-btn0').attr({
								'lay-filter': 'edit',
								'lay-submit': ''  //这里就是空的
							});
							form.render();
						}
						, yes: function (index, layero) {
							form.on('submit(edit)', function (data) {
								$.post({
									url: '/api/role/edit',
									type: "post",
									data: JSON.stringify(data.field),
									contentType: "application/json",
									success: function (res) {
										if (res.code == 200) {
											layer.close(index);//添加成功
											reload();//刷新列表
											clear();//清空界面										
										} else {
											layer.msg(res.msg);
										}
									}
								});
							});
						}
						, btn2: function (index, layero) {							
							clear();
						}
						, cancel: function (index, layero) {							
							clear();
						}
					});
				} else if (obj.event === 'permission') {
					layer.msg('功能开发中');
				}
			});

			//条件查询
			form.on('submit(search)', function (obj) {
				//console.log(obj);
				data_table.reload({
					page: {
						curr: 1
					}
					, where: obj.field
				});
			});
			//重置查询
			form.on('submit(reset)', function (obj) {
				$("input[name='keyword']").val('');
				reload();
			});
			//操作栏事件
			$('.table-operate-btn .layui-btn').on('click', function () {
				var type = $(this).data('type');
				if (type == 'add') {//添加角色
					layer.open({
						type: 1
						, title: '添加角色'
						, content: $("#window")
						, btn: ['确认', '取消']
						, success: function (layero, index) {
							// 添加form标识
							layero.addClass('layui-form');
							// 将第一个按钮改变成提交按钮
							layero.find('.layui-layer-btn0').attr({
								'lay-filter': 'add',
								'lay-submit': ''  //这里就是空的
							});
							form.render();
						}
						, yes: function (index, layero) {
							//layer.msg('点击了确认');
							form.on('submit(add)', function (data) {
								$.post({
									url: '/api/role/add',
									type: "post",
									data: JSON.stringify(data.field),
									contentType: "application/json",
									success: function (res) {
										if (res.code == 200) {
											layer.close(index);//添加成功
											reload();//刷新列表
											clear();//清空数据
										} else {
											layer.msg(res.msg);
										}
									}
								});
							});
						}
						, btn2: function (index, layero) {
							//layer.msg('点击了取消');
							clear();
						}
						, cancel: function () {
							//layer.msg('点击了关闭');
							clear();
						}
					});
				}
			});
		});
	</script>
</body>
</html>

